<template>
  <el-container class="custom-waterDataAnalysis-container">
    <el-header>
      <!-- <div class="custom-header-container">防溺管理</div> -->
    </el-header>
    <el-main>
      <div id="waterDataAnalysisMapContainer"></div>
      <div class="custom-mainleft">
        <p class="custom-title custom-title-s">最新动态：</p>
        <ul class="">
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
        </ul>
      </div>
      <div class="custom-mainright">
        <div class="info">
          <h4>信阳</h4><hr>
          <p id='forecast'></p>
        </div>
        <p class="custom-title custom-title-s" style="margin-top: 10px;">预警：</p>
        <ul class="">
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
          <li class="custom-Trends-list"><span>最新动态</span><span class="custom-date-tabs">2019-06-11</span></li>
        </ul>
      </div>
      <div class="custom-footer-container">
        <div class="custom-footleft">
          <p class="custom-title custom-title-m" style="margin-bottom:0;">水域深度：</p>
          <div id="depthEchart"></div>
        </div>
        <div class="custom-footmiddle">
          <p class="custom-title custom-title-l" style="margin-bottom:0;">水域面积：</p>
          <div id="areaEchart"></div>
        </div>
        <div class="custom-footright">
          <p class="custom-title custom-title-l" style="margin-bottom:0;">危险等级：</p>
          <div id="dangerEchart"></div>
        </div>
      </div>
    </el-main>
    <iframe width="0" height="0" id="url" :src="url"></iframe>
  </el-container>
</template>

<script>

import onlineBlot from '@/assets/img/onlineBlot.svg'
import breakdownBlot from '@/assets/img/breakdownBlot.svg'
import {getCameraPointpositionList, getVideo, getMapPoint} from '@/http/cameraApi'
export default {
  data () {
    return {
      AMapUI: null,
      AMap: null,
      map: null,
      url: '',
      colors: [
        '#1e2189', '#1426a1', '#0f2a8c', '#182ea0', '#1c208b', '#193498', '#1f2b9d', '#0f2da1',
        '#1a1d9a', '#1b2d90', '#142aa0', '#18287e', '#0d2085', '#11269a', '#152681', '#182a8c',
        '#192a87', '#1c309d', '#0f26a4', '#091d89'
      ],
      textStyleTitle: {
        color: 'white',
        fontSize: 16
      },
      textStyleAxis: {
        color: 'white'
      },
      cameraData: []
    }
  },
  beforeMount () {},
  mounted () {
    this.loadDistrictExplorer()
    this.drawDepthEcharts()
    this.drawAreaEcharts()
    this.drawDangerEcharts()
  },
  methods: {
    async markerClickEvt (e) {
      this.map.setCenter(e.target.lnglats)
      let cameraId = e.target.no
      let res = await getVideo({ indexCode: cameraId }).then(resp => {
        return resp
      })
      let data = res.data
      let param =
        'hikvideoclient://ReqType:' +
        'PlayReal' +
        ';' +
        'VersionTag:artemis' +
        ';' +
        'SvrIp:' +
        '125.45.145.172' +
        ';' +
        'SvrPort:' +
        '444' +
        ';' +
        'Appkey:' +
        data.appkey +
        ';' +
        'AppSecret:' +
        data.appSecret +
        ';' +
        'time:' +
        data.time +
        ';' +
        'TimeSecret:' +
        data.timesecret +
        ';' +
        'httpsflag:' +
        '1' +
        ';' +
        'CamList:' +
        cameraId +
        ';' +
        'wndCount:' +
        '1' +
        ';'
      this.url = param
    },
    drawDepthEcharts () {
      let m = this
      let depthChart = this.$echarts.init(document.getElementById('depthEchart'))
      depthChart.setOption({
        color: ['#3398DB'],
        title: {
          text: '类型',
          left: 8,
          top: 16,
          textStyle: m.textStyleTitle

        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          extraCssText: 'width:110px;height:40px;'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: [
          {
            type: 'category',
            data: ['水塘', '山塘', '水库', '河流', '人工基坑'],
            axisTick: { alignWithLabel: true },
            axisLabel: {
              show: true,
              textStyle: m.textStyleAxis
            }
          }
        ],
        xAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: m.textStyleAxis
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 200, 334, 390],
            axisLabel: {
              show: true,
              textStyle: m.textStyleAxis
            }
          }
        ]
      })
    },
    drawAreaEcharts () {
      let m = this
      let areaChart = this.$echarts.init(document.getElementById('areaEchart'))
      areaChart.setOption({
        title: {
          text: '水域数量',
          left: 8,
          top: 16,
          textStyle: m.textStyle
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['1500平方米以下', '1500-3000平米', '3000平米以上'],
          textStyle: m.textStyleAxis
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: m.textStyleAxis
          }
        },
        xAxis: {
          type: 'category',
          data: ['水塘', '山塘', '水库', '河流', '人工基坑'],
          axisLabel: {
            show: true,
            textStyle: m.textStyleAxis
          }
        },
        series: [
          {
            name: '1500平方米以下',
            barWidth: 50,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [320, 302, 301, 334, 390]
          },
          {
            name: '1500-3000平米',
            barWidth: 50,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [120, 132, 101, 134, 90]
          },
          {
            name: '3000平米以上',
            barWidth: 50,
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [220, 182, 191, 234, 290]
          }
        ]
      })
    },
    drawDangerEcharts () {
      let dangerChart = this.$echarts.init(document.getElementById('dangerEchart'))
      dangerChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'center',
          itemGap: 20,
          data: ['一级危险', '二级危险', '三级危险', '四级危险', '五级危险'],
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['75%', '50%'],
            roseType: 'area',
            data: [
              {value: 10, name: '一级危险'},
              {value: 5, name: '二级危险'},
              {value: 15, name: '三级危险'},
              {value: 25, name: '四级危险'},
              {value: 20, name: '五级危险'}
            ]
          }
        ]
      })
    },
    loadDistrictExplorer () {
      let m = this
      this.AMap = window.AMap
      this.AMap.plugin('AMap.Weather', function () {
        let weather = new AMap.Weather()
        weather.getForecast('信阳', function (err, data) {
          if (err) return ''
          let str = []
          let dayWeather = null
          for (let i = 0; i < data.forecasts.length; i++) {
            dayWeather = data.forecasts[i]
            let img = require('@/assets/img/weather/' + dayWeather.dayWeather + '.png')
            str.push('<div class="weatherLi">' + dayWeather.date + '<span class="weather">' + dayWeather.dayWeather + '</span> ' + dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃<span class="weatherIcon"><img src="' + img + '" /></span></div>')
          }
          document.getElementById('forecast').innerHTML = str.join('')
        })
      })
      var opts = {
        subdistrict: 1,
        extensions: 'all',
        level: 'district'
      }
      var district = new AMap.DistrictSearch(opts)
      district.search('平桥区', function (status, result) {
        var bounds = result.districtList[0].boundaries
        var mask = []
        let polygons = []
        for (let i = 0; i < bounds.length; i += 1) {
          var polygon = new AMap.Polygon({
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: 0.4,
            fillColor: '#1426a1',
            strokeColor: '#0091ea'
          })
          polygons.push(polygon)
          mask.push([bounds[i]])
        }
        m.map = new AMap.Map('waterDataAnalysisMapContainer', {
          mask: mask,
          center: [114.091104, 32.148489],
          viewMode: '3D',
          labelzIndex: 9999,
          pitch: 40,
          zoom: 10.4
        })
        m.map.setMapStyle('amap://styles/8d5705fe9baf14eec73c1a9d60bfbaad')
        m.map.add(polygons)
        getCameraPointpositionList().then(resp => {
          if (resp.code && resp.code === '200') {
            let data = resp.data
            if (data.length > 0) {
              // let positionArr = []
              for (let k = 0; k < data.length; k++) {
                getMapPoint(data[k].id).then(resp => {
                  if (resp.code && resp.code === '200') {
                    let resData = resp.data
                    if (resData.longitude && resData.latitude !== '') {
                      let maskerIn = new AMap.Marker({
                        icon: resData.cameraInfo.isOnline === '0' ? breakdownBlot : onlineBlot,
                        position: [resData.longitude, resData.latitude]
                      })
                      m.map.add(maskerIn)
                      maskerIn.no = resData.no
                      maskerIn.lnglats = resData.latLag
                      maskerIn.on('click', m.markerClickEvt)
                    }
                  }
                })
              }
            }
          }
        })
        // 添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1})
        m.map.add(object3Dlayer)
        var height = -8000
        var color = '#ccc'
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)
        m.map.panBy(0, 66)
      })
    }
  }
}
</script>
<style>
#waterDataAnalysisMapContainer{
  width: 100%;
  height: 500px;
  margin-top: 5%;
}
.wv-cr-h-copyright{
  display: none;
  z-index: 2;
}
.custom-mainright .info{
  border: 1px solid #105d93;
  width: 98%;
  padding: 16px 4px;
  border-radius: 4px;
  color: white;
}
.custom-mainright .info h4,
.custom-mainright .info p{
  width: 100%;
  margin: 0;
  text-align: center;
}
.weatherLi {
  line-height: 30px;
  text-align: left;
  padding-left: 30px
}
.weather {
  display: inline-block;
  min-width: 30px;
  padding:0 15px;
  color: yellow
}
.weatherIcon {
  display: inline-block;
  padding: 0 10px;
  line-height: 25px;
  vertical-align: middle
}
.weatherIcon img {
  width: 25px;
  height: auto
}
</style>
